<template>
  <div class="building-dialog">
    <el-dialog
      :title="housesTitle"
      :visible.sync="show"
      :before-close="close"
      width="75%"
      center
    >
      <el-form
        :model="addForm"
        :ref="addForm"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="楼栋" prop="buildingid">
          <CascaderSelect
            style="width: 100px"
            :buildId="addForm.buildingid"
            @changeBuildId="getBuildId"
          />
        </el-form-item>
        <el-form-item label="房间号" prop="houseno">
          <el-input
            v-model="addForm.houseno"
            clearable
            maxlength="6"
            style="width: 100px"
          ></el-input>
        </el-form-item>
        <el-form-item label="房间面积（平米）" prop="areas">
          <el-input
            v-model="addForm.areas"
            maxlength="7"
            style="width: 90px"
          ></el-input>
        </el-form-item>
        <el-form-item label="房间类型" prop="type" class="houseType">
          <el-select v-model="room" @change="houseType" placeholder="请选择">
            <el-option
              v-for="item in 10"
              :key="item"
              :label="item + '室'"
              :value="item + '室'"
            >
            </el-option>
          </el-select>
          <el-select v-model="parlour" @change="houseType" placeholder="请选择">
            <el-option
              v-for="item in 10"
              :key="item"
              :label="item + '厅'"
              :value="item + '厅'"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房屋朝向:" prop="orientation">
          <el-select v-model="addForm.orientation" style="width: 100px">
            <el-option
              v-for="item in ['东', '西', '南', '北']"
              :key="item"
              :label="'朝' + item"
              :value="'朝' + item"
            >
            </el-option>
          </el-select>
          <!-- <el-input
            v-model="formline.orientation"
            style="width:90px;"
          ></el-input> -->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="addBuiding(addForm)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import http from "../../api/houses";
import CascaderSelect from "./../building/cascader.vue";
export default {
  components: {
    CascaderSelect,
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      rules: {
        houseno: [
          { required: true, message: "房间名不能为空", trigger: "blur" },
        ],
        buildingid: [
          { required: true, message: "楼栋不能为空", trigger: "change" },
        ],
        areas: [
          { required: true, message: "房间范围不能为空", trigger: "blur" },
        ],
        type: [{ required: true, message: "房间类型选择", trigger: "change" }],
        orientation: [
          { required: true, message: "房屋朝向选择 ", trigger: "change" },
        ],
      },
      room: "", // 几室
      parlour: "", // 几厅
    };
  },
  computed: {
    ...mapState({
      housesTitle: (state) => state.houses.housesTitle,
      addForm: (state) => state.houses.addForm,
    }),
  },
  methods: {
    houseType() {
      this.addForm.type = this.room + this.parlour;
    },
    getBuildId(id) {
      console.log("buildingid", id);
      this.addForm.buildingid = id;
    },
    close() {
      this.$emit("close", false);
    },
    addBuiding(addForm) {
      this.$refs[addForm].validate(async (valid) => {
         if (valid) {
          if (this.addForm == JSON.stringify({})) {
            this.$message.success("请输入添加内容");
          } else {
            const { errCode } = await http.Addhouses(this.addForm);
            if (errCode === 10000) {
              this.$message.success(this.housesTitle + "成功");
              this.$emit("close", false, undefined, undefined, 1);
              // this.$refs.addForm.resetFields()/*  */;
            } else {
              this.$message.error(this.housesTitle + "失败");
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      // vuex 中拿到addForm 需要添加的字段
    },
  },
  watch: {
    addForm: {
      deep: true,
      handler(newV) {
        this.addForm = newV;
        this.room = this.addForm.type.substr(0, 2);
        this.parlour = this.addForm.type.substr(-2, 2);
      },
    },
  },
};
</script>

<style lang="less">
</style>